<template>
  <div v-if="loaded & !cmdError">
    <DataTable></DataTable>
  </div>

  <a-empty
    v-if="!loaded & !cmdError"
    :image="require('@/assets/img/dataWhere.gif')"
    :image-style="{
      height: '60px',
    }"
  >
    <template #description>
      <span class="error"> 数据呢？ </span>
    </template>
  </a-empty>

  <a-result v-if="cmdError" title="代码执行错误" status="error">
    <template #extra>
      <a-descriptions bordered title="错误信息">
        <a-descriptions-item label="code" :span="3">
          <code>
            <pre>{{ code }}</pre>
          </code>
        </a-descriptions-item>
        <a-descriptions-item label="info">
          {{ cmdMes }}
        </a-descriptions-item>
      </a-descriptions>
    </template>
  </a-result>
</template>

<script>
import { computed, defineComponent } from "vue";
import DataTable from "./DataTable/index.vue";
import DfStore from "@/store/DfStore";
import pdCmdStore from "@/store/PandasCmdStore";
import { PandasCmdResultType } from "@/models/PandasCmdModel";

export default defineComponent({
  name: "TableContent",
  components: { DataTable },
  props: {},

  setup() {
    let loaded = DfStore.getStateToRefs().isLoaded;
    let cmdError = computed(
      () => pdCmdStore.getStateReadonly().type === PandasCmdResultType.Error
    );

    let code = pdCmdStore.getStateToRefs().code;
    let cmdMes = pdCmdStore.getStateToRefs().message;

    return {
      loaded,
      cmdError,
      code,
      cmdMes,
    };
  },
});
</script>


<style lang="less" scoped>
code {
  text-align: left;
}
</style>
